<template>
<!--  小表详情数据页面-->
  <div style="width: 100%;margin: 10px 0 0 0;">
    <!--        查询表单-->
    <el-row v-show="showSearch" >
      <el-col class="form_col">
        <el-form :model="queryParams" ref="queryForm" :size="formItemSize" v-show="showSearch"
                 :label-width="labelWidth">
          <div id="searchFilter" style="display: flex; justify-content: start; flex-wrap: wrap;">
            <el-form-item label="抄表时间">
              <el-date-picker :size="formItemSize"
                v-model="dateRangeReadDate" value-format="yyyy-MM-dd HH:mm:ss"
                type="datetimerange" range-separator="-" start-placeholder="开始日期"
                end-placeholder="结束日期" style="width: 100%;" :default-time="['00:00:00', '23:59:59']"></el-date-picker>
            </el-form-item>
          </div>
        </el-form>
      </el-col>

      <el-col class="form_query">
        <el-button v-show="collapseAble" type="text" @click="shiftCollapseAble" class="text">
              <span>
                {{ fold ? '收起筛选' : '更多筛选' }}
              </span>
        </el-button>
        <el-button type="primary" @click="handleQuery" size="mini">查询</el-button>
        <el-button @click="resetQuery" size="mini">重置</el-button>
        <RightDropdown :columns="columns" :showSearch.sync="showSearch" :queryVisible="false" @queryTable="getList"
                       @export="handleExport"
                       :hasPermiExport="['datastatistics:meterhistory:export']"
                       style="margin-left: 10px;"></RightDropdown>
      </el-col>
    </el-row>
    <!-- tab -->
    <el-row class="tab">
      <el-tabs v-model="currentTab" @tab-click="handleTabClick">
        <el-tab-pane label="历史数据" name="historyData">
          <el-table ref="table" v-loading="loading" :data="dataList" size="mini" border
                    :default-sort="defaultSort" @sort-change="handleSorterChange" :height="getAvailableHeight" style="margin-top: 10px;">
           
            <el-table-column type="index" label="#" width="40" align="center"/>
            <el-table-column label="抄表时间" align="center" prop="readDate" width="180"
                          sortable="custom" :sort-orders="['ascending','descending']"
                          :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.readDate, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
              </template>
            </el-table-column>
            <el-table-column v-for="(item,index) in columns" v-if="item.key>1 && item.visible" :key="item.key" :prop="item.prop" align="center"
              :label="item.label" sortable="custom" :width="(((item.label.length<=2?4:item.label.length)+1)*20)" :show-overflow-tooltip="true"></el-table-column>
        
          
          </el-table>
          <pagination :total="total" :page.sync="queryParams.pageNum"
                      :limit.sync="queryParams.pageSize"
                      @pagination="getList"/>
        </el-tab-pane>
        <el-tab-pane label="图表" name="charts">
          <!--              <EchartsShow ref="refEchartsShow"/>-->
          <div id="main" style="width: 100%;" ref="main" :style="getChartBoxStyle"></div>
        </el-tab-pane>
      </el-tabs>
    </el-row>
  </div>
</template>
<script>
import {listElectricityMeterHistory} from "@/api/datastatistics/electricity/electricityMeterHistory";
import moment from "moment";
import {getTwoTimeList} from '@/utils/computeDays';

import * as echarts from "echarts";
require('echarts/theme/macarons')

export default  {
  name:"MeteredHistoryData",
  data() {
    return {
      echartsList: [],
      myChart: undefined,
      // 折线图继承
      chartExtend: {
        // 标题
        title: {
          text: ''
        },
        grid: {
          top: '5%',
          left: '5%',
          right: '5%',
          bottom: '6%',
          containLabel: true,
        },
        // x轴
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: [], // x轴坐标名称
        },
        // y轴
        yAxis: {
          //2022/10 /chuan 原：流量
          name: '用量(m³)',
          type: 'value',
          axisLabel: {
            formatter: '{value} m³'
          }
        },
        // 提示框，鼠标悬浮交互时的信息提示
        tooltip: {
          show: true,
          trigger: 'axis', // 触发类型，默认数据触发，见下图，可选为：'item' | 'axis'
        },
        toolbox: {
          show: true,
          feature: {
            saveAsImage: {}
          }
        },
        legend: {
          data: ['组合有功电能1'],
          x: 'center',
          y: 'top',
          show: true,
          padding: 20
        },
        dataZoom: [{
          start: 0,
          end: 100,
          bottom: 10,
          type: 'slider',
          showDataShadow: false,
          handleIcon: 'path://M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
          handleSize: '100%'
        }, {
          type: 'inside'
        }],
        // 指定图标的类型
        series: [],
      },
      currentTab: 'historyData',
      screenHeight: null,
      labelWidth: '70px',
      // 显示搜索条件
      showSearch: true,
      // 默认排序
      defaultSort: {prop: 'readDate', order: 'descending'},
      // 总条数
      total: 0,
      // 小-历史数据表格数据
      dataList: [],
      loading: false,
      maxShow: 4,
      collapseAble: false,
      fold: false,
      // 列信息
      columns: [
        {key: 0, label: `#`, visible: true},
        {key: 1, label: `抄表时间`, visible: true},
        {key: 2, label: `正向有功电能`, prop: 'positiveActiveEnergy', visible: true},
        {key: 3, label: `反向有功电能`, prop: 'reverseActiveEnergy', visible: true},
        {key: 4, label: `组合有功电能1`, prop: 'combinationActiveEnergy1', visible: true},
        {key: 5, label: `组合有功电能2`, prop: 'combinationActiveEnergy2', visible: true},
        {key: 6, label: `组合无功电能1`, prop: 'combinationIdleEnergy1', visible: true},
        {key: 7, label: `组合无功电能2`, prop: 'combinationIdleEnergy2', visible: true},
        {key: 8, label: `第一象无功总电能`, prop: 'firstIdleEnergy', visible: true},
        {key: 9, label: `第二象无功总电能`, prop: 'secondIdleEnergy', visible: true},
        {key: 10, label: `第三象无功总电能`, prop: 'thirdIdleEnergy', visible: true},
        {key: 11, label: `第四象无功总电能`, prop: 'fourthIdleEnergy', visible: true},
        {key: 12, label: `有功需量`, prop: 'activeReq', visible: true},
        {key: 13, label: `无功需量`, prop: 'idleReq', visible: true},
        {key: 14, label: `电流`, prop: 'electricCurrent', visible: true},
        {key: 15, label: `电压`, prop: 'voltageCurrent', visible: true},
        {key: 16, label: `有功功率`, prop: 'activePower', visible: true},
        {key: 17, label: `a相正向有功电能`, prop: 'aPositiveActiveEnergy', visible: true},
        {key: 18, label: `b相正向有功电能`, prop: 'bPositiveActiveEnergy', visible: true},
        {key: 19, label: `c相正向有功电能`, prop: 'cPositiveActiveEnergy', visible: true},
        {key: 20, label: `d相正向有功电能`, prop: 'dPositiveActiveEnergy', visible: true},
        {key: 21, label: `无功功率`, prop: 'idlePower', visible: true},
        {key: 22, label: `功率倍数`, prop: 'powerMagnification', visible: true},
        {key: 23, label: `正向有功最大需量发生时间`, prop: 'positiveActiveReqMaxTime', visible: true},
        {key: 24, label: `反向有功最大需量发生时间`, prop: 'reverseActiveReqMaxTime', visible: true},
        {key: 25, label: `距离上次的采集间隔分钟数`, prop: 'interval', visible: true},
        {key: 26, label: `频率F`, prop: 'frequency', visible: true}

      ],
      // 表单大小
      formItemSize: 'mini',
      // 时间范围
      dateRangeReadDate: [moment().subtract(1, 'day').format('YYYY-MM-DD 00:00:00'), moment().format('YYYY-MM-DD 23:59:59')],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        loginUserId: null,
        systemFlag: null,
        locationNb: null,
        params: {
          beginReadDate: moment().subtract(1, 'day').format('YYYY-MM-DD 00:00:00'),
          endReadDate: moment().format('YYYY-MM-DD 23:59:59')
        },
      },
    }
  },
  created() {
    this.screenHeight = document.body.clientHeight
  },
  computed: {
    getAvailableHeight() {
      return this.screenHeight - 314
    },
    getChartBoxStyle() {
      return { width: '100%', height: (this.screenHeight - 322) + 'px'}
    },
    loginUserId() {
      return this.$store.state.user.userId
    },
    systemFlag() {
      return this.$store.state.user.systemFlag
    }
  },
  mounted() {
    // 通过最大显示个数控制展开/折叠
    if (this.maxShow > 0) {
      this.minShowControl()
    }
  },
  methods: {
    updateLocationNb(locationNb){
      this.queryParams.locationNb = locationNb
    },
    // 点击tab标签页
    handleTabClick() {
      this.$nextTick(() => {
        // this.getEchartsData()
        this.handleQuery()
      })
    },
    // 初始化图表
    initEchart() {
      if (this.myChart) {
        this.myChart.dispose()
      }
      this.myChart = echarts.init(this.$refs.main)
      this.myChart.setOption(this.chartExtend, true)
      window.addEventListener('resize', () => {
        this.myChart.resize()
      })
    },
    // 渲染图表
    renderChart() {
      let days = []
      let startTime = this.queryParams.params.beginReadDate
      let endTime = this.queryParams.params.endReadDate
      let newStartTime = moment(startTime).format('YYYY-MM-DD 00:00:00')
      let newEndTime = moment(endTime).format('YYYY-MM-DD 23:59:59')
      days = getTwoTimeList(newStartTime, newEndTime)
      this.chartExtend.xAxis.data = days
      this.initEchart()
    },
    // 图表数据处理
    getEchartsData() {
      let queryParams = {
        pageNum: 1,
        pageSize: 9999,
        loginUserId: this.queryParams.loginUserId,
        systemFlag: this.queryParams.systemFlag,
        locationNb: this.queryParams.locationNb,
        params: {
          beginReadDate: this.queryParams.params.beginReadDate,
          endReadDate: this.queryParams.params.endReadDate
        },
      }
      listElectricityMeterHistory(queryParams).then(response => {
        if (response.code === 200) {
          this.echartsList = response.rows
          this.renderChart()
          this.handleData()
        }
      });
    },
    // 获取纵坐标
    handleData() {
      let datalist = this.echartsList
      this.chartExtend.series = []
      let xData = []
      let totalFlowItem = []
      // let readlistitem = []
      // let reverselistitem = []
      // let totallistitem = []
      for (var i = 0; i < datalist.length; i++) {
        xData.push(datalist[i].readDate);
        totalFlowItem.push([datalist[i].readDate, datalist[i].combinationActiveEnergy1]);
        // readlistitem.push([datalist[i].readDateN, datalist[i].readDosage]);
        //   reverselistitem.push([datalist[i].readDateN, datalist[i].reverseDosage]);
        //   totallistitem.push([datalist[i].readDateN, datalist[i].totalDosage]);
      }
      xData.sort(function(a,b) {
        return a > b ? 1 : -1
      })
      let totalFlowSeriesItem = {
        name: '组合有功电能1', // 系列名称
        type: 'line', // 类型：线
        smooth: true,
        data: totalFlowItem, // 数据
        showSymbol: false,
        markPoint: {
          // 特殊标注文字v/
          label: {
            normal: {
              show: true,
              //position: 'top', // 文字位置
              // 显示的文字
              formatter: '{b}：{c}',
            }
          },
          // 触发操作
          tooltip: {
            show: true, // 是否显示
            formatter: '{b}：{c}', // 内容格式器 a（系列名称），b（类目值），c（数值）, d（无）
            trigger: 'item', // 触发类型，默认数据触发，见下图，可选为：'item' | 'axis'
          },
        },
        // 折线图圆点
        label: {
          normal: {
            show: false,
            formatter: '{c}',
            textStyle: {
              color: '#000' // 文字颜色
            }
          }
        },
      }

      // let seriesItem = {
      //   name: '正向用量', // 系列名称
      //   type: 'line', // 类型：线
      //   smooth: true,
      //   data: readlistitem, // 数据
      //   markPoint: {
      //     // 特殊标注文字v/
      //     label: {
      //       normal: {
      //         show: true,
      //         //position: 'top', // 文字位置
      //         // 显示的文字
      //         formatter: '{b}：{c}',
      //       }
      //     },
      //     // 触发操作
      //     tooltip: {
      //       show: true, // 是否显示
      //       formatter: '{b}：{c}', // 内容格式器 a（系列名称），b（类目值），c（数值）, d（无）
      //       trigger: 'item', // 触发类型，默认数据触发，见下图，可选为：'item' | 'axis'
      //     },
      //   },
      //   // 折线图圆点
      //   label: {
      //     normal: {
      //       show: false,
      //       formatter: '{c}',
      //       textStyle: {
      //         color: '#000' // 文字颜色
      //       }
      //     }
      //   },
      // }
      // let readSeriesItem = {
      //   name: '反向用量', // 系列名称
      //   type: 'line', // 类型：线
      //   smooth: true,
      //   data: reverselistitem, // 数据
      //   markPoint: {
      //     // 特殊标注文字v/
      //     label: {
      //       normal: {
      //         show: true,
      //         //position: 'top', // 文字位置
      //         // 显示的文字
      //         formatter: '{b}：{c}',
      //       }
      //     },
      //     // 触发操作
      //     tooltip: {
      //       show: true, // 是否显示
      //       formatter: '{b}：{c}', // 内容格式器 a（系列名称），b（类目值），c（数值）, d（无）
      //       trigger: 'item', // 触发类型，默认数据触发，见下图，可选为：'item' | 'axis'
      //     },
      //   },
      //   // 折线图圆点
      //   label: {
      //     normal: {
      //       show: false,
      //       formatter: '{c}',
      //       textStyle: {
      //         color: '#000' // 文字颜色
      //       }
      //     }
      //   },
      // }
      // let totalSeriesItem = {
      //   type: 'line', // 类型：线
      //   smooth: true,
      //   data: totallistitem, // 数据
      //   markPoint: {
      //     // 特殊标注文字v/
      //     label: {
      //       normal: {
      //         show: true,
      //         //position: 'top', // 文字位置
      //         // 显示的文字
      //         formatter: '{b}：{c}',
      //       }
      //     },
      //     // 触发操作
      //     tooltip: {
      //       show: true, // 是否显示
      //       formatter: '{b}：{c}', // 内容格式器 a（系列名称），b（类目值），c（数值）, d（无）
      //       trigger: 'item', // 触发类型，默认数据触发，见下图，可选为：'item' | 'axis'
      //     },
      //   },
      //   // 折线图圆点
      //   label: {
      //     normal: {
      //       show: false,
      //       formatter: '{c}',
      //       textStyle: {
      //         color: '#000' // 文字颜色
      //       }
      //     }
      //   },
      // }
      this.chartExtend.xAxis.data = xData
      this.chartExtend.series.push(totalFlowSeriesItem);
      // this.chartExtend.series.push(seriesItem);
      // this.chartExtend.series.push(readSeriesItem);
      // this.chartExtend.series.push(totalSeriesItem);
      this.initEchart()
    },
    // 重置图表
    resetEchart() {
      this.chartExtend = {
        // 标题
        title: {
          text: ''
        },
        grid: {
          top: '10%',
          left: '5%',
          right: '5%',
          bottom: '6%',
          containLabel: true,
        },
        // x轴
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: [], // x轴坐标名称
        },
        // y轴
        yAxis: {
          //2022/10 /chuan 原：流量
          name: '',
          type: 'value',
          axisLabel: {
            formatter: '{value} m³'
          }
        },
        // 提示框，鼠标悬浮交互时的信息提示
        tooltip: {
          show: true,
          trigger: 'axis', // 触发类型，默认数据触发，见下图，可选为：'item' | 'axis'
        },
        toolbox: {
          show: true,
          feature: {
            saveAsImage: {}
          }
        },
        legend: {
          data: ['组合有功电能1'],
          show: true,
          padding: 20
        },
        dataZoom: [{
          start: 0,
          end: 100,
          bottom: 10,
          type: 'slider',
          showDataShadow: false,
          handleIcon: 'path://M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
          handleSize: '100%'
        }, {
          type: 'inside'
        }],
        // 指定图标的类型
        series: []
      }
    },

    /** 排序触发事件 */
    handleSorterChange({column, prop, order}) {
      this.queryParams.orderByColumn = prop
      this.queryParams.isAsc = order
      this.getList()
    },
    /** 检查设置排序字段 */
    checkSortColumn() {
      if (!this.queryParams.orderByColumn) {
        this.queryParams.orderByColumn = this.defaultSort.prop
        this.queryParams.isAsc = this.defaultSort.order
      }
    },
    // 初始化表格 解决表格固定操作列的问题
    init() {
      // 调用接口获取到数据后
      let _self = this
      this.$nextTick(() => {
        window.setTimeout(() => {
          _self.$refs.table.doLayout()
        }, 100)
      })
    },
    /** 查询小-历史数据列表 */
    getList() {
      // this.checkSortColumn()
      this.loading = true;
      if (null != this.dateRangeReadDate && '' != this.dateRangeReadDate) {
        this.queryParams.params["beginReadDate"] = this.dateRangeReadDate[0];
        this.queryParams.params["endReadDate"] = this.dateRangeReadDate[1];
      }
      this.queryParams.systemFlag = this.systemFlag
      this.queryParams.loginUserId = this.loginUserId
      listElectricityMeterHistory(this.queryParams).then(response => {
        this.dataList = response.rows;
        this.total = response.total;
        this.init()
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.resetEchart()
      this.queryParams.pageNum = 1;
      this.queryParams.params.beginReadDate = this.dateRangeReadDate[0];
      this.queryParams.params.endReadDate = this.dateRangeReadDate[1];
      this.getEchartsData();
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRangeReadDate = [moment().subtract(1, 'day').format('YYYY-MM-DD 00:00:00'), moment().format('YYYY-MM-DD 23:59:59')];
      this.queryParams.params = {
        beginReadDate: moment().subtract(1, 'day').format('YYYY-MM-DD 00:00:00'),
        endReadDate: moment().format('YYYY-MM-DD 23:59:59')
      };
      this.$refs.table.sort(this.defaultSort.prop, this.defaultSort.order)
      this.resetForm("queryForm");
      this.chartExtend.series = []
      this.dataList = []
      this.initEchart()
      this.handleQuery();
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('/datastatistics/electricityMeterHistory/export', {
        ...this.queryParams
      }, `电表历史数据.xlsx`)
    },
    // 展开折叠按钮
    shiftCollapseAble() {
      this.fold = !this.fold
      this.minShowControl()
    },
    // 通过maxShow控制元素显示/折叠
    minShowControl() {
      const group = window.document.querySelectorAll(`#searchFilter .el-form-item.el-form-item--${this.formItemSize}`)
      const len = group?.length ? group?.length : 0
      if (this.maxShow < len) {
        group.forEach((item, index) => {
          if (index > this.maxShow - 1 && index < len) {
            item.hidden = !this.fold
          }
        })
        this.collapseAble = true
      } else {
        this.collapseAble = false
      }
    },
  }
}
</script>
<style scoped lang="scss">
.form_col {
  width: 80%;

  ::v-deep .el-form {
    width: 100%;
  }

  ::v-deep .el-form-item {
    width: 40%;
  }
}

.form_query {
  width: 20%;
  text-align: right;
}
::v-deep .el-tabs__header {
  //margin: 0 0 10px;
}
</style>
